<template>
  <div>
    <div class="flex-rb mb10">
      <router-link to="/personal/plan">
        <div class="side-text line">学习计划</div>
      </router-link>
      <div class="point-flex">
        <el-dropdown style="font-size: 18px;color: #68bfd6" :hide-on-click="false">
          <i class="el-icon-time mr10">学习记录</i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in viewHistory" :key="item.videoId">
              <div class="dropdown-item" @click="viewVideo(item)">
                <div class="left-img">
                  <el-image
                    style="height: 67px;width: 108px;border-radius: 2px"
                    :src="item.courseCover"
                  ></el-image>
                </div>
                <div class="right-text">
                  <div class="course-name">
                    <div>{{item.courseName}}</div>
                    <div>{{item.chapterName}}</div>
                  </div>
                  <div class="view-date">观看时间：{{item.viewDate}}</div>
                </div>
              </div>
            </el-dropdown-item>
            <el-dropdown-item class="check-all">
              <router-link target="_blank" to="/history">查看全部</router-link>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <el-card>
      <div v-if="planList.length !==0">
        <el-row :gutter="20" class="mb8">
          <el-col :span="10">
            <span class="plan_span">学习计划：</span>
            <el-select v-model="planId" placeholder="请选择" @change="getCourse">
              <el-option
                v-for="item in planList"
                :key="item.planId"
                :label="item.planName"
                :value="item.planId"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="10" style="height: 40px;">
            <span class="plan_span">学习进度：</span>
            <el-progress
              class="plan_progress"
              :text-inside="true"
              :percentage="(planProgress&&planProgress !='NaN')?Number(planProgress.toFixed(2)):0"
              :color="customColorMethod"
              :stroke-width="20"
            />
          </el-col>
        </el-row>

        <div class="mt10" v-if="courseList.length !== 0">
          <courselist :course-list="courseList" @click="toDetail" showProgress basis="22%" />
        </div>
      </div>
      <el-empty v-else description="暂无学习计划课程"></el-empty>
    </el-card>
  </div>
</template>

<script>
import { getCourseById, getPlanList } from "@/api/plan";
import courselist from "@/views/Personal/child/comp/CourseList";
import { getCourseHistoryById } from "@/api/course";
import { getUserHistory } from "@/api/user";
export default {
  components: { courselist },
  name: "plan",
  data() {
    return {
      planList: [],
      courseList: [],
      planId: undefined,
      viewHistory: [],
      progressMap: {},
      planProgress: 0
    };
  },
  watch: {
    planId: {
      handler(newV) {
        this.planId = newV;
      },
      immediate: true
    }
  },
  created() {
    this.getPlanList();
    this.getHistory();
  },
  methods: {
    getPlanList() {
      getPlanList().then(res => {
        if (res.code === 200) {
          if (res.data.length !== 0) {
            this.planList = res.data;
            // 默认获取第一个计划的id
            this.planId = res.data[0].planId;
            // let map = new Map();
            res.data.forEach(item => {
              this.progressMap[item.planId] = item.progress;
            });
            this.getCourse();
          }
        }
      });
    },
    getCourse() {
      // 设置学习计划进度
      this.planProgress = this.progressMap[this.planId];

      getCourseById({ planId: this.planId }).then(res => {
        if (res.code === 200) {
          this.courseList = res.data;
        }
      });
    },
    toDetail(id) {
      getCourseHistoryById(id).then(res => {
        const result = res.data;
        const { href } = this.$router.resolve({
          path: "/course",
          query: {
            courseId: id,
            chapterId: result.chapterId,
            videoId: result.videoId
          }
        });
        window.open(href, "_blank");
      });
    },
    getHistory() {
      getUserHistory().then(res => {
        if (res.code == 200) {
          this.viewHistory = res.data;
        }
      });
    },
    viewVideo(data) {
      const { href } = this.$router.resolve({
        path: "/course",
        query: {
          courseId: data.courseId,
          videoId: data.videoId,
          chapterId: data.chapterId
        }
      });
      window.open(href, "_blank");
    },
    /** 进度颜色 */
    customColorMethod(percentage) {
      if (percentage < 20.0) {
        return "#F56C6C";
      } else if (percentage < 60.0) {
        return "#E6A23C";
      } else if (percentage < 80.0) {
        return "#409EFF";
      } else {
        return "#67C23A";
      }
    }
  }
};
</script>

<style scoped>
.plan_span {
  font-size: 16px;
  color: #909399;
  margin-left: 30px;
  line-height: 40px;
}
.plan_progress {
  display: inline-block;
  width: 70%;
}
.el-card {
  min-height: 600px;
}
.el-dropdown-menu {
  height: 420px;
  overflow-y: auto;
  overscroll-behavior: none;
}
.el-dropdown-menu__item:hover {
  background-color: #f4f4f4;
}
.dropdown-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.course-name {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  font-size: 14px;
  font-weight: 500;
  color: #212121;
}
.view-date {
  font-size: 12px;
  color: #999999;
}
.course-name div {
  padding-right: 5px;
}
.right-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 5px;
}
.check-all {
  text-align: center;
  background-color: #f4f4f4;
  color: #212121;
  font-size: 14px;
  margin-top: 10px;
  transition: 0.3s ease;
}
.check-all a {
  color: #212121;
}
.check-all:hover {
  background-color: #e7e7e7;
  color: #212121;
  border: 1px solid #e7e7e7;
}
</style>
